<template>
	<view class="container" style="margin-bottom: 40rpx;">
		<view class="bg-color5 padding-sm text-sm text-white text-center">
			提示：根据国家政策要求，发布信息前需要实名认证
		</view>
		<view class="bg-white padding">
			<view class="bg-white text-13 flex justify-between align-center">
				<view class="text-333 flex-sub text-bold">
					姓名
				</view>
				<input  type="text" v-model="username" value="" class="text-13 flex-treble"
					placeholder="请输入姓名" />
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
				<view class="text-333 flex-sub text-bold">
					身份证号
				</view>
				<input type="text" :disabled="disabled" v-model="idCard" value="" class="text-13 flex-treble"
					placeholder="请输入身份证号" />
			</view>
			<view class="bg-white text-13 flex justify-between  margin-top-sm">
				<text class="text-333 flex-sub text-bold">
					个人描述
				</text>
				<textarea  v-model="description" style="height: 140rpx;padding-top: 5rpx;"
					class="text-13 flex-treble" placeholder="请输入个人描述" />
			</view>
			<view class="text-13 text-333 text-bold margin-top-sm">
				上传身份证
			</view>
			<view class="text-767696 bg-white margin-top text-sm">
				请上传清晰身份证件，避免信息模糊审核不通过
			</view>
			<view class="flex justify-between align-center IDcard margin-top-sm">
				<view class="flex justify-center align-center flex-direction">
					<view v-if='idCardPicBack' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="idCardPicBack" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelBack" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-left" @click="uploadBack">
						<image :src="baseUrl +'/static/positive.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						身份证人像面
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view v-if='idCardPicFront' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="idCardPicFront" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelFont" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-right" @click="uploadFont">
						<image :src="baseUrl +'/static/negative.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						身份证国徽面
					</view>
				</view>
			</view>
		</view>

		<view class="margin-top-sm padding bg-white">
			<view class="text-13 text-333 text-bold">
				上传技工证
			</view>
			<view class="text-767696 bg-white margin-top-sm text-sm">
				请上传清晰身份证件，避免信息模糊审核不通过
			</view>
			<view class="flex justify-between align-center m-card margin-top">
				<view class="flex justify-center align-center flex-direction">
					<view v-if='mechanicPicFront' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="mechanicPicFront" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelMechanic" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>


					<view v-else class="flex justify-center align-center i-left" @click="uploadMechanic">
						<image :src="baseUrl +'/static/add.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						证件正面
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">

					<view v-if='mechanicPicBack' style="position: relative;"
						class="flex justify-center align-center i-left">
						<image style="width: 100%;height: 100%;" :src="mechanicPicBack" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelPicBack" style="right:0;top:0;position: absolute;">
							<text class="cuIcon-close"></text>
						</view>
					</view>

					<view v-else class="flex justify-center align-center i-right" @click="uploadPicBack">
						<image :src="baseUrl +'/static/add.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm">
						证件反面
					</view>
				</view>
			</view>
		</view>
	
		<view class="margin-top-sm padding bg-white">
			<view class="flex justify-between align-center">
				<view class="text-13 text-333 text-bold">
					选择技工服务类型（多选）
				</view>
				<view class="flex justify-start align-center">
					<view class="" @click="checkType">
						请选择
					</view>
					<view class="cuIcon-right lg margin-left-xs">

					</view>
				</view>
			</view>
			<view class="flex flex-wrap margin-top-xs">
				<view class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn" v-for="item in checkeds">
					{{item.name}}
				</view>
			</view>
		</view>
		<button v-if='!disabled' class="text-15 text-white bg-color padding text-center btn round"
			@click="submit">确定</button>
			<button v-else class="text-15 text-white bg-color padding text-center btn round"
				@click="edit">编辑</button>
		<view v-if='!disabled' class="text-sm text-333 margin-bottom text-center">
			上传身份信息后，平台将24小时内审核
		</view>
		<tki-tree @confirm='handChecked' ref="tkitree" :multiple='true' idKey='id' :range="options" rangeKey="name"
			confirmColor="#4e8af7" />
	</view>
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import {
		appConfig
	} from '@/common/js/config.js'
	import {checkIDCard} from '@/common/js/idCard.js'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				username: '',
				idCard: '',
				idCardPicBack: '',
				idCardPicFront: '',
				mechanicPicBack: '',
				mechanicPicFront: '',
				mechanicType: '',
				options: [],
				checkeds: [],
				description: '',
				disabled:false,
				mechanicTypeName: [],
				id:''
			};
		},
	onShow() {
			this.getTreeList()
			const that = this
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo.mechanicStatus) {
				that.disabled =true
				that.getDetail()
			}
		},
		methods: {
			checkType() {
				
				this.$refs.tkitree._show()
			},
			async ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							this.imgList.push(req.data.imgurl)
						})
					}
				});
			},
			//上传身份证反面
			uploadBack() {
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.idCardPicBack = req.data

						})
					}
				});
			},
			//删除身份证反面
			DelBack() {
				
				this.idCardPicBack = ''
			},
			//上传身份证正面
			uploadFont() {
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.idCardPicFront = req.data

						})
					}
				});
			},
			//删除身份证正面
			DelFont() {
				
				this.idCardPicFront = ''
			},
			//上传技工证正面
			uploadMechanic() {
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.mechanicPicFront = req.data

						})
					}
				});
			},
			//删除技工证正面
			DelMechanic() {
				
				this.mechanicPicFront = ''
			},
			//上传技工证反面
			uploadPicBack() {
			
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.mechanicPicBack = req.data

						})
					}
				});
			},
			//删除技工证反面
			DelPicBack() {
				
				this.mechanicPicBack = ''
			},
			//获取服务分类
			async getTreeList() {
				const [err, res] = await this.$get(this.$api.home_categoryTreeList, {
					type: 2,
				});
				if (res) {
					this.options = res.data;
					console.log(res);
				}
			},
			handChecked(data) {
				console.log(data)
				const array = []
				if (data.length != 0) {
					for (let i in data) {
						array.push(data[i].id)
					}
					this.mechanicType = array.toString()
					this.checkeds = data

				}
			},
			async submit() {
				const {
					username,
					idCard,
					idCardPicBack,
					idCardPicFront,
					mechanicPicFront,
					mechanicPicBack,
					mechanicType,
					description
				} = this
				if (!username) {
					return this.$util.msg('姓名不能为空')
				}
				if (!checkIDCard(idCard)) {
					return this.$util.msg('身份证号格式有误')
				} 
				if (!description) {
					return this.$util.msg('个人描述不能为空')
				}
				if (!idCardPicBack) {
					return this.$util.msg('身份证人像面不能为空')
				}
				if (!idCardPicFront) {
					return this.$util.msg('身份证国徽面不能为空')
				}
				if (!mechanicPicFront) {
					return this.$util.msg('技工证件正面不能为空')
				}
				if (!mechanicPicBack) {
					return this.$util.msg('技工证件反面不能为空')
				}
				const data2 = {
					name: username,
					idCard,
					idCardPicBack,
					idCardPicFront,
					userId: uni.getStorageSync('userId')
				}
				const [error, result] = await this.$jsonPost(this.$api.addIdentityInfo, data2)
				if (result) {
					let mechanicTypeName = ''
					let array = []
					for (let i in this.checkeds) {
						array.push(this.checkeds[i].name)
					}
					mechanicTypeName = array.join(',')


					const data = {
						username,
						idCard,
						idCardPicBack,
						idCardPicFront,
						mechanicPicFront,
						mechanicPicBack,
						mechanicType,
						description,
						mechanicTypeName,
						userId: uni.getStorageSync('userId') || appConfig.userId,
					}
					const [err, rs] = await this.$jsonPost(this.$api.applyMechanic, data)
					if (rs) {
						if(rs.code==200){
							uni.showToast({
								title: '请注意消息提醒，1~3个工作日有认证反馈',
								duration: 3000,
								icon: 'none'
							
							})
							
							setTimeout(function() {
								uni.navigateBack()
							}, 4000)
							
						}else{
							this.$util.msg(res.message)
						}
					}
				}
			},
			async getDetail() {
				const data = {
					userId: uni.getStorageSync('userId') || appConfig.userId,

				}
				const [err, rs] = await this.$get(this.$api.mechanicApplyList, data)
				if (rs) {
					console.log(rs)
					const data = rs.data.list[0]
					this.username = data.userName
					this.idCard = data.userIdCard
					this.idCardPicBack = data.idCardPicBack
					this.idCardPicFront = data.idCardPicFront
					this.mechanicPicFront = data.mechanicPicFront
					this.mechanicPicBack = data.mechanicPicBack
					this.description = data.description
					this.id = data.id
					if (data.mechanicTypeName) {
						const array  = data.mechanicTypeName.split(',')
						
						for(let i in array){
							array[i] = {name:array[i]}
						}
						console.log(array)
						this.mechanicTypeName = array
						this.checkeds = array
						console.log(this.checkeds)
						console.log(222223333)
					}


				}
			},
			async edit(){
				const {
					username,
					idCard,
					idCardPicBack,
					idCardPicFront,
					mechanicPicFront,
					mechanicPicBack,
					mechanicType,
					description
				} = this
				if (!username) {
					return this.$util.msg('姓名不能为空')
				}
			
				if (!description) {
					return this.$util.msg('个人描述不能为空')
				}
				if (!idCardPicBack) {
					return this.$util.msg('身份证人像面不能为空')
				}
				if (!idCardPicFront) {
					return this.$util.msg('身份证国徽面不能为空')
				}
				if (!mechanicPicFront) {
					return this.$util.msg('技工证件正面不能为空')
				}
				if (!mechanicPicBack) {
					return this.$util.msg('技工证件反面不能为空')
				}
				
				
					let mechanicTypeName = ''
					let array = []
					for (let i in this.checkeds) {
						array.push(this.checkeds[i].name)
					}
					mechanicTypeName = array.join(',')
				
				
					const data = {
						username,
						idCardPicBack,
						idCardPicFront,
						mechanicPicFront,
						mechanicPicBack,
						mechanicType,
						description,
						mechanicTypeName,
						userId: uni.getStorageSync('userId') || appConfig.userId,
						id:this.id
					}
					const [err, rs] = await this.$jsonPost(this.$api.updateMechanic, data)
					if (rs) {
						if(rs.code==200){
							uni.showToast({
								title: '更新成功',
								duration: 1500,
								icon: 'none'
							
							})
							
							setTimeout(function() {
								uni.navigateBack()
							}, 2000)
							
						}else{
							this.$util.msg(res.message)
						}
					}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.IDcard {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 156rpx;
				height: 156rpx;
			}
		}

	}

	.m-card {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.t-btn {
		padding: 18rpx 28rpx;
	}

	.btn {
		margin: 60rpx 20rpx 20rpx;
	}
</style>
